#Table(表格)
參見下圖說明(圖多)
A
B
C
A:<table>,表示表格數據,包含B:<thead>,表頭 及C:<tbody>,表格內容
D
E
F
D:<tr>,定義表格中"行"的範圍、E:<th>,定義表頭各欄的值、F:<td>,定義一個含數據的表格單元格。
若是想要在表頭中同一性質欄位作分類可以怎麼做?,以下以足球員轉會費金額作解釋。
G
H
I
G:由於想在轉會費欄位項下區分歐元及英鎊兩種幣值,為保持表格的可視性,先使用屬性rowspan=2,分
別將球員姓名、由、至欄位的行數擴充為2。
H:再使用屬性colspan=2,將轉會費欄位一分為二。
I:後續轉會費即可分別以歐元、英鎊表達。
#Form[表示HTML中的一個區域,主要用於向伺服器提交訊息(Submit)]
參見下圖說明(圖多)
J
K
L
M
J:<form>,目前裡的屬性action=/tacos,僅為示範用途,無實際功能。
K:<label>,用於說明<form>某元素的定義。
L:<input>,用於接受使用者端的各項數據,可使用多種類型,圖中a.type=text為一般字元;b.type=password為密碼形式(以*表示輸入的數據);c.type=color為選擇顏色;d.type=number則為數字。
在這裡可使用多個屬性定義輸入值的限制,比方d.中的數字我設定為最小值1,最大值10000。
M:<button>,a.表達一個可供點擊的按鈕,其樣式後續可用CSS作調整,一般其預設樣式取決於瀏覽器,另外點擊按鈕的動作若無特殊設定,一般是將資料提交到<form>中的action。亦可使用b.<input>形式建立按鈕。c.在<form>區域外建立的按鈕點擊後並不會提交資料(無反應,僅可點擊)
註:Day6預計為HTML的倒數第二天,Day7試作一個簡易報名表單,Day8開始進入CSS。